<template>
  <view class="bodyView">
    <form>

      <view class="cu-form-group r-border">
        <view class="title" @tap="redirectHqzInfo">
          代理等级<text class='cuIcon-info text-custom'></text>
        </view>
        <picker @change="pickerChange" :value="index" :range="categorysName">
          <view class="picker">
            {{index>-1?categorysName[index]:'请选择'}}
          </view>
        </picker>
      </view>

      <view class="cu-form-group r-border">
        <view class="title">称呼</view>
        <input type="nickname" maxlength="10" placeholder-style="color:#999;font-size:14px;" placeholder="请填写称呼"
               v-model="member.name"  @blur="nameBlur" />
      </view>
      <view class="cu-form-group  r-border">
        <view class="title">手机号码</view>
        <input type="text" maxlength="11" placeholder-style="color:#999;font-size:14px;" v-model="member.phone" placeholder="请填写手机号码" @blur="phoneBlur">
      </view>
      <view class="cu-form-group  r-border">
        <view class="title">申请城市</view>
        <input type="text" maxlength="11" placeholder-style="color:#999;font-size:14px;" v-model="member.area" placeholder="请填写申请城市" @blur="cityBlur">
      </view>
      <view class="margin-top text-gray margin-left margin-right">
         提交申请后，会有客服人员协助您完成接下来的操作。
      </view>
      <button class="cu-btn block margin-tb-sm lg s-btn" @click="saveProxy">提交</button>
    </form>

  </view>
</template>

<script setup lang="ts">
import {onMounted, ref, reactive, computed} from "vue";
import { findMechanismCategoryQtCurrentLevel} from "@/common/api/proxyCategory";
import { applyPorxy} from "@/common/api/user";
import {useStore} from "../../common/store";
import { onLoad ,onShow} from '@dcloudio/uni-app';

import {redirectToPage, navigateToPage, switchTabPage} from '@/common/utils/redirectPage'

const store = useStore();
const token = computed(() => store.token)
const userId = computed(() => store.userId)

// 非ts写法

const openid = ref('')

const categorysIds = ref([]);
const categorysName = ref([]);
const index = ref(0);

// 用户信息
const member = reactive({
  phone:'',
  openId: token.value,
  name: '',
  area: '',
  proxyCategoryId: ''
});

const initProxyCategory = () => {
  categorysIds.value = [];
  categorysName.value = [];
  findMechanismCategoryQtCurrentLevel(userId.value).then(res => {
    console.log("-------------")
    console.log(res);
    let data = res.data;
    data.forEach(r => {
      categorysIds.value.push(r.id)
      categorysName.value.push(r.categoryName)
    })
  })
}

const pickerChange = (e) => {
  index.value = e.detail.value
}

const saveProxy = async () => {

  if (!member.name) {
    uni.showToast({
      title: '称呼不能为空',
      duration: 2000,
      icon: 'none'
    });
    return false;
  }

  if (!member.phone) {
    uni.showToast({
      title: '手机号不能为空',
      duration: 2000,
      icon: 'none'
    });
    return false;
  }

  if (!member.area) {
    uni.showToast({
      title: '请输入申请区域',
      duration: 2000,
      icon: 'none'
    });
    return false
  }

  member.proxyCategoryId = categorysIds.value[index.value];
  member.adminId = userId.value;
  await applyPorxy(member).then(res => {
    setTimeout(() => {
      uni.showToast({
        icon: 'none',
        duration: 3000,
        title: `${res.message}`,
        success: function () {
          switchTabPage('/pages/user/index')
        }
      });
    }, 3000)
  })
}

const nameBlur = (e) => {
  member.name = e.detail.value
}

const cityBlur = (e) => {
  member.area = e.detail.value
}

const usernameBlur = (e) => {
  member.username = e.detail.value
  if (!member.username) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `请填写用户名`
    });
    member.username = ''
    return
  }
  var reg = /^[A-Za-z0-9]+$/;
  if (!reg.test(member.username)) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `用户名为数字字或符串`
    });
    member.username = ''
    return;
  }
}

const phoneBlur = () => {
  if (!member.phone) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `请填写手机号码`
    });
    return
  }

  var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  if (!reg.test(member.phone)) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `手机号码有误，请重新输入!`
    });
    member.phone= ''
    return;
  }
}

const redirectHqzInfo = () => {
  uni.navigateTo({
    url: `/pages/user/applyhzqInfo`
  })
}


// register
onLoad((options : any) => {

})

onMounted(async () => {
  initProxyCategory();
})
</script>

<style lang="scss" scoped>
.bodyView {
  margin: 10rpx;
  .cu-form-group .title {
    min-width: calc(4em + 15px);
    text-align: right;
  }
}
.form {
  border-radius: 8rpx;
}

.form-input {
  margin-top: 20rpx;
  .label {
    width: 160rpx;
    font-size: 32rpx;
    color: #5A5B5C;
    text-align: right;
    padding-right: 14rpx;
    margin-top: 2rpx;

  }

  .input {
  }

  .radio-group {
    display: flex;
    justify-content: flex-start;

    .radio {
      padding: 10rpx 30rpx;
      border-radius: 6rpx;
      border: 2rpx solid #919293;
      color: #919293;
      font-size: 28rpx;

      &.checked {
        background-color: #ADB838;
        color: #ffffff;
        border: 2rpx solid #ADB838;
      }
    }
  }
}

.d-flex {
  display: flex;
}

.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.w-100 {
  width: 100% !important;
}

.align-items-center {
  align-items: center;
}

.align-items-left {
  align-items: left;
}

.avatar-wrapper {
  padding: 0;
  margin: 0;
  width: 35px !important;
  border-radius: 8px;
}

.avatar {
  display: block;
  width: 35px;
  height: 35px;
  z-index: 1;
}
.button {
  background-color: green;
  margin: 20rpx;
}
.s-btn{
  color: white;
  background-color:#DAA520;
  margin-top: 216rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}
.r-border {
  border-bottom: 1px solid #EAEAEA;
  border-top-width:0px  ;
}
</style>
